﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .red {
            color: red;
        }

        .hidden {
            display: none;
        }
        .pwdhidden{
            display:none;
        }
    </style>
    <script src="~/Script/jquery.js"></script>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <p>用户名：<input type="text" id="username"  onblur="checkInput()"/><span id="usernameTip" class="red hidden">用户名不能为空</span></p>
            <p>密码：<input type="password" onblur="checkInput()" id="pwd" /><span id="pwdTip" class="red hidden">密码不能为空</span><span id="pwdTip1" class="red pwdhidden">密码不一致</span></p>
            <p>确认密码：<input type="password" onblur="checkInput()" id="pwd1" /><span id="pwdTip" class="red hidden">密码不能为空</span><span id="pwdTip1" class="red pwdhidden">密码不一致</span></p>
            <p><input type="submit" value="登录" /></p>
        }

    </div>

    <script>
        function checkInput() {
            var username = $("#username").val();
            var pwd = $("#pwd").val();

            //用户名
            if (username == "") {
                $("#usernameTip").removeClass("hidden");
                return false;
            } else {
                $("#usernameTip").addClass("hidden");
            }
            //密码
            if (pwd == "") {
                $("#pwdTip").removeClass("hidden");
                return false;
            } else {
                $("#pwdTip").addClass("hidden");
            }
            
            return true;
        }
        ////判断密码是否一致
        //function pwd() {
        //    var pwd = $("#pwd").val();
        //    var pwd1 = $("#pwd").val();
        //    if (pwd == pwd1) {
        //        return true;
        //    } else {
        //        $("#pwdTip").removeClass("pwdhidden")
        //    }

        //}
        $(document).ready(function () {
            $("form").bind("submit", checkInput());
        })
    </script>
</body>
</html>
